<!-- 个人资料页面 -->
<!-- 小鸽子 更新于2020年  8月23-->
<!-- 小鸽子  调用接口  8月28 -->
<!-- 小鸽子  9/6  增加预览图片 -->
<template>
	<view>
		<view class="photo">
			<image :src="information.imgUrl" mode="aspectFill" v-if="information.imgUrl" @tap="previewImage(information.imgUrl)"></image>
		</view>
		<!-- v-if="!information.imgUrl" -->
		<view class="photo_icon" @tap="uploadPhoto">
			<text class="inxupt inxupttubiao44"></text>
		</view>
		<view class="personMsg">
			<view>
				<text>昵称</text><input type="text" placeholder="请输入10字以内昵称" @blur="yNickname" v-model="information.nickname" />
			</view>
			<view>
				<text>签名/职业</text><input type="text" placeholder="请输入20字以内签名" @blur="yAutograph" v-model="information.autograph" />
			</view>
			<view>
				<text>性别</text>
				<picker @change="bindSexChange" :value="information.indexSex" :range="arraySex">
					<view>{{arraySex[information.indexSex]}}</view>
				</picker>
			</view>
			<view>
				<text>年级</text>
				<picker @change="bindGradeChange" :value="indexGrade" :range="arrayGrade" v-model="arrayGrade[indexGrade]">
					<view>{{arrayGrade[indexGrade]===''?'20':arrayGrade[indexGrade]}}</view>
				</picker>
			</view>
			<view>
				<text>专业</text>
				<picker mode="multiSelector" @columnchange="bindMajorChange" :range="arrayMajor">
					<view>{{stringMajor === '' ? arrayMajor[1][numMajor] : stringMajor}}</view>
				</picker>
			</view>
		</view>
		<button v-show="showBtn" :disabled="!(ynk||yag)" @tap="changeInformation">确认修改</button>
	</view>
</template>

<script>
	import {
		_ajax
	} from '../../in-xupt-functions.js'
	import BaseUrl from '../../config.js'
	export default {
		data() {
			return {
				information: {
					imgUrl: '',
					nickname: '',
					autograph: '',
					indexSex: 0, //性别序号
					grade: '',
					major: ''
				},
				ynk: false,
				yag: false,
				arraySex: ['保密', '男', '女'],
				arrayGrade: ['14', '15', '16', '17', '18', '19', '20'],
				indexGrade: 0,
				arrayMajor: [
					['通信与信息工程学院', '计算机学院', '电子工程学院', '自动化学院', '经济管理学院', '现代邮政学院', '理学院', '数字艺术学院', '网络空间安全学院', '人文与外国语学院'], // 在这个数组里面增加学院
					['通信工程', '信息工程', '电子信息科学与技术', '广播电视工程', '物联网工程', '电信工程及管理'] // 这里不用改
				],
				indexMajor: [0, 0],
				numMajor: 0,
				stringMajor: '',
				showBtn: true
			}
		},
		methods: {
			previewImage: function(logourl) {
				var that = this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				})
			},
			uploadPhoto: function() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						that.information.imgUrl = res.tempFilePaths[0]
						const tempFilePaths = res.tempFilePaths //数组
						uni.showToast({
							mask: true,
							title: '正在上传头像',
							icon: 'none'
						})
						uni.uploadFile({
							url: BaseUrl + '/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': that.token,
								'contentType': 'multipart/form-data'
							},
							success: (res) => {
								let res1 = JSON.parse(res.data);
								console.log(res1)
								if (res1.status != 0) {
									uni.showToast({
										icon: 'none',
										title: res1.msg
									})
								}else {
									_ajax({
										url: '/user/avatar',
										method: 'PUT',
										data: res1.data
									})
									.then(res => {
										if(res.data.status == 0) {
											uni.showToast({
												title: '头像修改成功！',
												icon: 'none'
											})
										}else {
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											})
										}
									})
									.catch(err => {
										uni.showToast({
											title: '头像修改失败！',
											icon: 'none'
										})
									})
								}
							}
						})
					}
				});
			},
			yNickname: function() {
				if (this.information.nickname.trim().length > 10) {
					this.ynk = false
					uni.showToast({
						title: '请输入范围内的昵称',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.information.nickname.trim().length <= 10) {
					this.ynk = true
				}
			},
			yAutograph: function() {
				if (this.information.autograph.trim().length > 20) {
					this.yag = false
					uni.showToast({
						title: '请输入范围内的签名',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.information.autograph.trim().length <= 20) {
					this.yag = true
				}
			},
			bindSexChange: function(e) {
				this.yNickname()
				this.yAutograph()
				this.information.indexSex = e.target.value
			},
			bindMajorChange: function(e) {
				this.yNickname()
				this.yAutograph()
				this.stringMajor = ''
				this.indexMajor[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0:
						switch (this.indexMajor[0]) {
							case 0:
								this.arrayMajor[1] = ['通信工程', '信息工程', '电子信息科学与技术', '广播电视工程', '物联网工程', '电信工程及管理']
								break
							case 1:
								this.arrayMajor[1] = ['计算机科学与技术', '软件工程', '网络工程', '数据科学与大数据技术']
								break
							case 2:
								this.arrayMajor[1] = ['光电信息科学与工程', '微电子科学与工程', '电子信息工程', '电子科学与技术', '电磁场与无线技术', '电子信息工程（中外合作）', '集成电路设计与集成系统']
								break
							case 3:
								this.arrayMajor[1] = ['智能科学与技术', '测控技术与仪器', '电气工程及其自动化', '自动化']
								break
							case 4:
								this.arrayMajor[1] = ['人力资源管理专业', '会计学', '信息管理与信息系统', '国际经济与贸易', '工商管理', '市场营销', '电子商务', '经济学', '财务管理', '金融工程']
								break
							case 5:
								this.arrayMajor[1] = ['工业工程', '物流管理', '邮政工程', '邮政管理']
								break
							case 6:
								this.arrayMajor[1] = ['信息与计算专业', '应用物理学', '材料物理']
								break
							case 7:
								this.arrayMajor[1] = ['数字媒体艺术', '网络与新媒体']
								break
							case 8:
								this.arrayMajor[1] = ['信息安全', '信息对抗技术', '网络空间安全']
								break
							case 9:
								this.arrayMajor[1] = ['行政管理', '公共事业管理', '英语', '商务英语']
								break
								// case 10:
								// 	this.arrayMajor[1] = ['新增学院专业1', '新增学院专业2', '新增学院专业3', '新增学院专业4']
								// 	break
								// 以此类推
						}
						break
					case 1:
						this.numMajor = e.detail.value
				}
				this.information.major = this.arrayMajor[1][this.numMajor]
				this.$forceUpdate() //强制刷新渲染
			},
			bindGradeChange: function(e) {
				this.yNickname()
				this.yAutograph()
				this.indexGrade = e.target.value
				this.information.grade = this.arrayGrade[this.indexGrade]
			},
			changeInformation: function() {
				const that = this;
				console.log(this.information)
				that.token = uni.getStorageSync('token')
				_ajax({
					url: '/user',
					method: 'PUT',
					data: {
						'description': this.information.autograph,
						'gender': this.information.indexSex,
						'grade': this.arrayGrade[this.indexGrade],
						'major': this.information.major == '' ? this.stringMajor : this.information.major,
						'nickName': this.information.nickname
					}
				})
				.then(res => {
					if(res.data.status == 0) {
						uni.showToast({
							icon:'none',
							title: '信息修改成功啦!',
						})
						setTimeout(function() {
							uni.isRefresh = true
							uni.navigateBack({
								delta:1
							})
						}, 500)
					}else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(function() {
							uni.isRefresh = true
							uni.navigateBack({
								delta:1
							})
						}, 500)
					} 
				})
				.catch(err => {
					uni.showToast({
						title: '个人信息修改失败！',
						icon: 'none'
					})
					setTimeout(function() {
						uni.isRefresh = true
						uni.navigateBack({
							delta:1
						})
					}, 500)
				})
			},
			// 获得个人信息
			getInformation: function() {
				const that = this
				that.token = uni.getStorageSync('token')
				_ajax({
					url: '/user/page',
					method: 'GET'
				}).then(res => {
					that.information.imgUrl = res.data.data.avatarUrl
					that.information.autograph = res.data.data.description
					that.information.nickname = res.data.data.nickname
					that.information.indexSex = res.data.data.gender
					if (res.data.data.grade) {
						that.indexGrade = that.arrayGrade.indexOf(res.data.data.grade)
					} else {
						that.indexGrade = 3
					}
					if (res.data.data.major) {
						that.stringMajor = res.data.data.major
					} else {
						that.stringMajor = '通信工程'
					}
				})
			},
		},

		onLoad() {
			let that = this
			uni.showLoading({
				mask: true,
				title: '正在加载中...',
				success() {
					that.getInformation()
					that.yNickname()
					that.yAutograph()
				}
			})
			setTimeout(function() {
				uni.hideLoading()
			}, 400)
			let _this = this;
			uni.onKeyboardHeightChange(function(res){
				if(res.height == 0) {
					_this.showBtn = true
				}else {
					_this.showBtn = false
				}
			})
		}
	}
</script>

<style lang="less">
	.photo {
		position: absolute;
		top: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-size: 85% 85%;
		background-position: center;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.photo_icon {
		position: absolute;
		top: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #000000;
		width: 126rpx;
		height: 53rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.personMsg {
		position: absolute;
		top: 280rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		// padding-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.personMsg>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx;
		height: 130rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #F2f2f2;
		background-color: #FFFFFF;
		color: #808080;

		input {
			text-align: right;
		}

	}

	.personMsg>view:first-of-type {
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.personMsg>view:last-of-type{
		border-bottom: none;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
	.personMsg>view>text:first-of-type {
		color: #000000;
	}

	.choseSex {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;

		.Sex {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 320rpx;
			background-color: #FFFFFF;
		}

		.Sex>view:nth-of-type(1) {
			margin: 16rpx 0 0 16rpx;
			color: #808080;
		}

	}
	
	button {
		position: absolute;
		bottom: 80rpx;
		left: 20%;
		font-size: 32rpx;
		width: 450rpx;
		height: 88rpx;
		border-radius: 10rpx;
		background-color: @g-pink;
		color: #FFFFFF;
		font-size: 16px;
		line-height: 88rpx;
	}
</style>
